<template>
  <div class="receive-detail">
    <div class="content">
      <div class="dialog-title">指令式弹窗demo</div>
      <div class="desc">直接使用函数式调用，传入参数，直接渲染组件</div>
    </div>
    <van-button class="btn" type="primary" block round @click="emit('close')"
      >好的</van-button
    >
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'close'): void
}>()
</script>

<style lang="scss" scoped>
.receive-detail {
  .content {
    width: 650px;
    height: 400px;
    background: linear-gradient(180deg, #fff9f6 0%, #fff 100%);
    box-shadow: 4px 0px 8px 0px #ffba3b;
    border-radius: 32px;
    overflow-y: auto;
    .dialog-title {
      font-family: IdeaFonts, IdeaFonts;
      font-weight: bold;
      font-size: 48px;
      color: #ff910b;
      line-height: 96px;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
    .desc {
      padding: 0 48px;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 400;
      font-size: 48px;
      color: #333333;
      line-height: 68px;
      text-align: justifyLeft;
      font-style: normal;
      text-transform: none;
    }
  }
  .btn {
    width: 314px;
    height: 104px;
    margin: 40px auto 0;
  }
}
</style>
